<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="880px"
    :before-close="handleClose"
  >
    <div class="content">
      <div class="title">
        张三
        <span class="afterTitle">123123132</span>
      </div>
      <div class="topChartsBox">
        <div class="chartTitle">
          <div>活动规律分析</div>
          <div class="btns">
            <span class="avtBtn">今天</span>
            <span>近7天</span>
            <span>近30天</span>
          </div>
        </div>
        <div class="ecahrtsBox">
          <div ref="ecahrts1" class="charts1"></div>
          <div ref="ecahrts2" class="charts2"></div>
        </div>
      </div>
      <div class="bottomBox">
        <div class="left">
          <div class="title2">活跃统计</div>
          <v-calendar :attributes="highlights" ref="cal" />
        </div>
        <div class="mid">
          <div class="title2">出现天数 20</div>
          <div class="daysBox">
            <div class="item" v-for="num in 20" :key="num">
              <span>2024-02-02</span> <span>{{ num }}次</span>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="title2">出入记录</div>
          <div class="imgsBox">
            <div v-for="item in 20" :key="item" class="imgItem">
              <img src="../../assets/images/search/nobody.png" alt="" />
              <div class="timeBox">5分钟前</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
let myChart1 = null;
let myChart2 = null;
let xData = (function () {
  let data = [];
  for (let i = 1; i < 7; i++) {
    data.push(i + "号楼");
  }
  return data;
})();
let xData2 = (function () {
  let data = [];
  for (let i = 1; i < 30; i++) {
    data.push(i);
  }
  return data;
})();
export default {
  mounted() {
    this.$nextTick(() => {
      this.draw1();
      this.draw2();
    });
  },
  computed: {
    thisMonth() {
      return this.pageForThisMonth.month - 1;
    },
    thisMonthYear() {
      return this.pageForThisMonth.year;
    },
    nextMonth() {
      return this.pageForNextMonth.month - 1;
    },
    nextMonthYear() {
      return this.pageForNextMonth.year;
    },
    highlights() {
      return [
        {
          highlight: "green",
          dates: [new Date(), new Date("2024-04-08")],
        },
      ];
    },
  },
  data() {
    return {
      dialogVisible: true,
    };
  },
  methods: {
    draw1() {
      myChart1 && myChart1.dispose();
      myChart1 = this.$echarts.init(this.$refs.ecahrts1);
      let option = {
        grid: {
          top: "30",
          left: "40",
          bottom: "30",
          right: "10",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          right: "10%",
          textStyle: {
            fontSize: "11px",
            color: "#05F5FF",
          },
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#2B3B55",
                type: "dashed",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#2B3B55",
                type: "dashed",
              },
            },
            axisTick: {
              show: true,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#fff",
              fontSize: 11,
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#2B3B55",
                type: "dashed",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#2B3B55",
                type: "dashed",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#ffffff",
              fontSize: 11,
            },
            splitArea: {
              show: false,
            },
          },
        ],

        series: [
          {
            type: "bar",
            name: "出现次数",
            barMaxWidth: 15,
            barGap: "10%",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#05F5FF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#33FEFE", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: [709, 1999, 709, 2299, 3299, 2299],
          },
          {
            type: "line",
            symbolSize: 1,
            symbol: "circle",
            itemStyle: {
              normal: {
                color: "rgba(255, 196, 53, 1)",
              },
            },
            lineStyle: {
              normal: {
                width: 1,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#F0B62A", // 0% 处的颜色
                    },
                    {
                      offset: 0.45,
                      color: "#FFC12B", // 45% 处的颜色
                    },
                    {
                      offset: 0.85,
                      color: "#FFC12B", // 85% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FFC12B", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: [709, 1999, 709, 2299, 3299, 2299, 123, 3, 4654, 54, 645],
          },
        ],
      };
      myChart1.setOption(option);
    },
    draw2() {
      myChart2 && myChart2.dispose();
      myChart2 = this.$echarts.init(this.$refs.ecahrts2);
      let option = {
        grid: {
          top: "30",
          left: "40",
          bottom: "30",
          right: "10",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          show: false,
          right: "10%",
          textStyle: {
            fontSize: "11px",
            color: "#05F5FF",
          },
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#2B3B55",
                type: "dashed",
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#2B3B55",
                type: "dashed",
              },
            },
            axisTick: {
              show: true,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#fff",
              fontSize: 11,
            },
            data: xData2,
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#2B3B55",
                type: "dashed",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#2B3B55",
                type: "dashed",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#ffffff",
              fontSize: 11,
            },
            splitArea: {
              show: false,
            },
          },
        ],

        series: [
          {
            type: "bar",
            name: "出现次数",
            barMaxWidth: 6,
            barGap: "10%",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#05F5FF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#33FEFE", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: [
              709, 1999, 709, 2299, 3299, 2299, 123, 3, 4654, 54, 645, 709,
              1999, 709, 2299, 3299, 2299, 123, 3, 4654, 54, 645, 709, 1999,
              709, 2299, 3299, 2299, 123, 3, 4654, 54, 645,
            ],
          },
        ],
      };
      myChart2.setOption(option);
    },
    add() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
  deactivated() {
    myChart1 && myChart1.dispose();
    myChart2 && myChart2.dispose();
  },
};
</script>
<style lang='scss' scoped>
.dialogBox {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
  align-items: flex-start;
}
.el-dialog__header {
  padding: 0 20px;
  background: #0a1a34;
  padding-top: 16px;
  border-bottom: 0px solid #e5e5e5;

  .el-dialog__title {
    color: #fff;
  }
}

.el-dialog__headerbtn {
  display: none;
}

::v-deep .el-dialog__body {
  background: #0a1a34;
  width: 880px !important;
  color: #fff;
}

.el-dialog__footer {
  background-color: #0a1a34;
  text-align: right;
  padding-right: 20px;
  box-sizing: border-box;
}
.content {
  padding: 20px;
  .title {
    color: #ffffff;
    padding-bottom: 14px;
    border-bottom: 1px solid #fff;
    font-weight: bold;
  }
  .title2 {
    color: #ffffff;
    padding-bottom: 14px;
  }
  .afterTitle {
    background: #0e6a84;
    border-radius: 4px;
    margin-left: 8px;
    padding: 1px 6px;
    font-size: 11px;
  }
  .topChartsBox {
    background: rgba(46, 94, 171, 0.1);
    box-shadow: inset 0px 1px 15px 0px rgba(3, 251, 255, 0.6);
    margin-top: 14px;
    padding: 14px;
    box-sizing: border-box;
    border-radius: 6px;
    .chartTitle {
      display: flex;
      justify-content: space-between;
      span {
        background: #135779;
        padding: 4px 8px;
        font-size: 11px;
        border-radius: 6px;
        margin-left: 20px;
        cursor: pointer;
      }
      .avtBtn {
        background: #1dd4ff;
      }
    }
    .ecahrtsBox {
      display: flex;
      justify-content: space-between;
      margin-top: 14px;
    }
    .charts1,
    .charts2 {
      width: 325px;
      height: 180px;
      border: 2px solid #20426a;
      border-radius: 4px;
    }
    .charts2 {
      width: 465px !important;
    }
  }
  .bottomBox {
    margin-top: 14px;
    height: 330px;
    width: 100%;
    display: flex;
    .left,
    .mid,
    .right {
      height: 100%;
      padding: 14px;
      box-sizing: border-box;
      background: rgba(46, 94, 171, 0.1);
      box-shadow: inset 0px 1px 15px 0px rgba(3, 251, 255, 0.6);
      border-radius: 6px;
    }
    .left,
    .right {
      width: 325px;
    }
    .mid {
      width: 162px;
      margin: 0px 14px;
      .daysBox {
        width: 100%;
        height: calc(100% - 38px);
        overflow: auto;
        .item {
          color: #fff;
          font-size: 11px;
          margin: 5px;
          display: flex;
          justify-content: space-between;
        }
      }
    }
    .right {
      .imgsBox {
        width: 100%;
        height: calc(100% - 38px);
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
      }
      .imgItem {
        margin-left: 8px;
        margin-bottom: 6px;
        border-radius: 4px;
        border: 1px solid #03fbff;
        position: relative;
        img {
          width: 60px;
          object-fit: cover;
        }
        .timeBox {
          width: 100%;
          height: 16px;
          line-height: 16px;
          position: absolute;
          color: #fff;
          top: -24px;
          text-align: center;
          background: rgba(0, 0, 0, 0.6);
          border-radius: 0px 0px 6px 6px;
          font-size: 11px;
        }
      }
    }
  }
}
// ::v-deep .el-descriptions {
//   color: #fff;
// }
// ::v-deep .el-descriptions__body {
//   background-color: transparent !important;
//   color: #fff;
// }
::v-deep .vc-container {
  background: transparent;
  border: none;
  color: #fff;
  margin-left: 24px;
}

::v-deep .vc-title {
  color: #fff;
}
</style>
